When using Sudo Slider, there's only one requirement to the HTML: That the slider is a div, with a unordered list inside.
Like this:
<div id="slider">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
When Sudo Slider loads, it makes some buttons, which easily can be targeted with CSS.
This is the resulting HTML using the default configuration.
<div id="slider">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<span id="controlsid">
<a href="#" class="nextBtn"> next </a>
<a href="#" class="prevBtn"> previous </a>
</span>
The Controls are positioned outside of the HTML, so that they won't conflict with the slider itself.
And with every possible control enabled (still using the default configuration):
<div id="slider">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<span id="controlsid">
<a href="#" class="nextBtn"> next </a>
<a href="#" class="prevBtn"> previous </a>
<a href="#" class="lastBtn"> last </a>
<a href="#" class="firstBtn"> first </a>
<ol class="controls">
<li rel="1" id="class="controls"" class="current"><a href="#"><span>1</span></a></li>
<li rel="2" id="class="controls""><a href="#"><span>2</span></a></li>
<li rel="3" id="class="controls""><a href="#"><span>3</span></a></li>
<li rel="4" id="class="controls""><a href="#"><span>4</span></a></li>
<li rel="5" id="class="controls""><a href="#"><span>5</span></a></li>
</ol>
</span>
If you then read the document descriping the different settings, you will see that much of this can be changed.
Including inserting the controls before instead of after the slider using the option insertAfter
In the next example, the option names for the various pieces of changeable HTML is shown instead of their default value.
<div id="slider">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<span controlsAttr>
nextHtml
prevHtml
lastHtml
firstHtml
<ol numericAttr>
<li rel="1" class="current"><a href="#"><span>1</span></a></li>
<li rel="2"><a href="#"><span>2</span></a></li>
<li rel="3"><a href="#"><span>3</span></a></li>
<li rel="4"><a href="#"><span>4</span></a></li>
<li rel="5"><a href="#"><span>5</span></a></li>
</ol>
</span>
I know that it's not possible to change the numeric controls a lot, but you can always use customLinks (see below), if you want more freedom.
The customLinks option is really interesting, because by using it, you have 100% freedom over the HTML of the controls.
The value that goes into the customLink option, is a CSS selector, that targets the HTML you want to be a control.
To be precise, it's jQuery selector, but just use it as an normal CSS selector.
I usually use a value like customLink: 'a.customlink', to select links with the class "customlink" to be my controls.
Remember that anything can be used, it doesn't have to be a link. And remember that one doesn't exclude the other, you can use ordinary controls and customLinks at the same time.
But we also need to tell the slider what to do, that's done using the rel tag, using the exact same values as explained in the second chapter of the how to.
So a quick example of a custom control (using the above example CSS selctor) would be:
<a class="customlink" rel="next">
This link makes the slider go to the next slide
</a>
A customlink can the anything, even the slider itself. (I assume that the option customLink is set to 'li.customlink')
<div id="slider">
<ul>
<li class="customlink" rel="3">Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
That code will make the slider animate to the third slide, when you click anywhere on the first slide.
Now you should know how to make the HTML and CSS for Sudo Slider, next is the animations.
As you might have noticed, the numeric buttons in the demo change color when a buttons corresponding slide is selected.
This happens because the numeric buttons gets a "current" class added (and removed later, when the button no longer matches the current slide).
As always with controls, remember that there's no difference between customLinks and "normal" controls, everything explained here works on both.
But there's also a function that fires when an numeric control gets the "current" class, and when it's removed.
They are: currentFunc and uncurrentFunc
And with them, you can make any animation with the numeric controls.
I got a quick demo that uses them both.
This all happens after the animation is complete (at least with the default settings, it can be changed using the updateBefore option).
If you want to animate the next/previous/first/last buttons, then you can use the beforeAniFunc and afterAniFunc
It could look something like this:
$(document).ready(function(){
$("#slider").sudoSlider({
prevNext: true,
numeric: false,
beforeAniFunc: function(t){
$('.nextBtn').stop().fadeTo(300, 0.3);
$('.prevBtn').stop().fadeTo(300, 0.3);
},
afterAniFunc: function(t){
if (t != 5) $('.nextBtn').stop().fadeTo(500, 1);
if (t != 1) $('.prevBtn').stop().fadeTo(500, 1);
}
});
});